<template>
	<div style="width: 100%; height: 100%; position: relative;">
		<div class="container">
			<div class="container-title">
				<div class="container-title-text">
					标签列表
				</div>
				<el-button class="container-title-btn1" @click="show=true" type="primary">添加</el-button> 
				<el-button class="container-title-btn1" @click="adds()" type="primary">add</el-button>
			</div>
			<div class="container-cont">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="date" label="日期" width="180">
					</el-table-column>
					<el-table-column prop="_id" label="id" width="240">
					</el-table-column>
					<el-table-column prop="name" label="标签名" width="180">
						<template slot-scope="scope">
							<el-tag type="success" disable-transitions>{{scope.row.name}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="icon" label="图标" width="80">
						<template slot-scope="scope">
							<img style="width: 50px;display: block;margin: 0 auto;" :src="scope.row.icon" alt=""
								srcset="" />
						</template>
					</el-table-column>
					<el-table-column prop="tag_cd" label="热度" :filters="[{text: 1, value: 1},]"
						:filter-method="filterHandler" width="80">
					</el-table-column>
					<el-table-column prop="cont" label="数量">
					</el-table-column>
				</el-table>
			</div>
			<transition name="el-fade-in-linear">
				<div v-show="show" class="mask">
					<div class="mask-box">
						<div class="mask-box-title">标签添加</div>
						<div class="mask-box-name">
							<el-input placeholder="请输入标签名" v-model="name">
								<template slot="prepend">标签名</template>
							</el-input>
						</div>
						<div class="mask-box-icon">
							<el-input placeholder="请选择标签图标" :disabled="true" v-model="url">
								<template slot="prepend">ico图标</template>
								<template slot="append">
									<el-button class="" @click="show1=true" type="primary">添加</el-button>
								</template>
							</el-input>
						</div>
						<div class="mask-box-btn">
							<div class="mask-box-btn-btn1">
								<el-button @click="addclick()" class="" type="primary">确定</el-button>
							</div>
							<div class="mask-box-btn-btn2">
								<el-button @click="show=false" class="" type="info">取消</el-button>
							</div>
						</div>
						<div class="icon-box" v-show="show1">
							<div @click="iconclick(itam.url,m)" v-for="(itam,m) in tagicon"
								:style="index==m ? 'background-color: gainsboro;' : ''" class="icon-box-itam">
								<img :src="itam.url" alt="" srcset="" />
							</div>
							<div class="icon-box-btn">
								<div class="icon-box-btn-btn1">
									<el-button @click="show1=false,url=url1" class="" type="primary">确定</el-button>
								</div>
								<div class="icon-box-btn-btn2">
									<el-button @click="show1=false" class="" type="info">取消</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
		<ny-mask></ny-mask>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				tags: [],
				show: false,
				show1: false,
				name: '',
				url: '',
				url1: '',
				tagicon: [],
				index: -1,
			};
		},
		mounted() {
			setTimeout(() => {
				this.tags = getApp().globalData.tags
				this.tagicon = getApp().globalData.tags_icon
				this.tags.map((n, m) => {
					let date = n.create_date
					this.tableData.push({
						"date": `${date[0]}${date[1]}${date[2]}${date[3]}-${date[4]}${date[5]}-${date[6]}${date[7]}`,
						"_id": n._id,
						"name": n.name,
						"icon": n.icon,
						"tag_cd": n.tag_cd,
						"cont": n.cont
					})
				})
			}, 2000)
		},
		methods: {
			filterHandler() {
				const property = column['property'];
				return row[property] === value;
			},
			async adds() {
				let col = uniCloud.importObject('goodsPictureObj', {
					customUI: true
				})
				let res = await col.goodsPictureVolume('')
				console.log(res)
			},
			iconclick(n, m) {
				this.index = m
				this.url1 = n
			},
			addclick() {
				let col = uniCloud.importObject('indexObj', {
					customUI: true
				})
				let create_date = this.gettime()
				let istrue = false
				this.tags.map((n, m) => {
					if (n.name == this.name) {
						istrue = true
						return
					}
				})
				var form = {
					name: this.name,
					tag_cd: 0,
					icon: this.url,
					cont: 0,
					create_date: create_date
				}
				if (istrue == false) {
					if (this.url == '') {
						this.$message({
							message: '请选择标签图标！！',
							type: 'warning'
						});
					} else {
						col.addimgpackTag(form).then((res) => {
							console.log(res)
							this.show = false
						})
					}
				} else {
					this.$message({
						message: '标签名重复！！',
						type: 'warning'
					});
				}
				console.log(this.tags)
			},
			// 获取时间
			gettime() {
				var date = new Date()
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()
				var hour = date.getHours()
				var fen = date.getMinutes()

				if (month <= 9) {
					month = `0${month}`
				}
				if (day <= 9) {
					day = `0${day}`
				}
				if (hour <= 9) {
					hour = `0${hour}`
				}
				if (fen <= 9) {
					fen = `0${fen}`
				}
				return `${year}${month}${day}${hour}${fen}`
			},
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 97%;
		overflow-y: auto;
		overflow-x: hidden;

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 5;
			display: flex;
			justify-content: center;
			align-items: center;

			.mask-box {
				width: 600px;
				height: 500px;
				background-color: #fff;
				position: relative;

				.icon-box {
					transition: all .4s;
					width: 552px;
					height: 450px;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background-color: #fff;
					border: 1px solid #409EFF;
					padding: 10px;
					overflow-x: hidden;
					overflow-y: auto;

					.icon-box-btn {
						position: absolute;
						width: 552px;
						height: 50px;
						background-color: #fff;
						bottom: 0;

						.icon-box-btn-btn1 {
							position: absolute;
							width: 70px;
							height: 40px;
							left: 200px;
							top: 5px;
						}

						.icon-box-btn-btn2 {
							position: absolute;
							width: 70px;
							height: 40px;
							right: 200px;
							top: 5px;
						}
					}

					.icon-box-itam {
						width: 90px;
						height: 90px;
						border: 1px solid gainsboro;
						box-sizing: border-box;
						float: left;
						margin: 1px;
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						img {
							width: 90%;
						}
					}

					.icon-box-itam:hover {
						background-color: #f9f9f9;
					}
				}

				.mask-box-title {
					width: 100%;
					height: 60px;
					background-color: #f9f9f9;
					line-height: 60px;
					text-align: center;
					font-size: 14px;
				}

				.mask-box-name {
					width: 80%;
					height: 60px;
					margin-left: 10%;
					margin-top: 20px;
				}

				.mask-box-icon {
					width: 80%;
					height: 60px;
					margin-left: 10%;
					margin-top: 20px;
				}

				.mask-box-btn {
					position: absolute;
					width: 100%;
					height: 50px;
					bottom: 90px;

					.mask-box-btn-btn1 {
						position: absolute;
						width: 70px;
						height: 40px;
						left: 200px;
						top: 5px;
					}

					.mask-box-btn-btn2 {
						position: absolute;
						width: 70px;
						height: 40px;
						right: 200px;
						top: 5px;
					}
				}
			}
		}

		.container-title {
			width: 100%;
			height: 60px;
			background-color: #fff;
			border-radius: 5px 5px 0 0;

			.container-title-text {
				float: left;
				width: 100px;
				height: 60px;
				line-height: 60px;
				font-size: 14px;
				margin-left: 30rpx;
			}

			.container-title-btn1 {
				float: right;
				margin-right: 40px;
				height: 30px;
				width: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 15px;
				font-size: 12px;
			}
		}

		.container-cont {
			width: 100%;
			height: calc(100% - 60px - 20px);
			background-color: #fff;
			margin-top: 20px;
		}

	}
</style>